<template>
  <div>
    <el-container>
      <el-header>
        <h2>菜品列表</h2>
      </el-header>
      <el-main>
        <br/>
        <br/>
        <el-input v-model="searchTerm" style="width: 150px"  placeholder="输入菜品ID" clearable  ></el-input>
        <el-button type="primary" @click="searchDish">搜索ID</el-button>
        <el-button type="success" style="margin-left: 20px" @click="getDishes">获取所有菜品</el-button>
        <br>

        <div style="margin-top: 30px">
          <el-input v-model="dish_name" style="width: 150px"  placeholder="输入菜品名称" clearable  ></el-input>
          <el-button type="primary" @click="searchDishesByName" style="margin-right: 20px">按名称搜索</el-button>
          <el-select v-model="dish_cuisine" style="width: 150px"  placeholder="输入菜系" clearable  >
            <el-option label="川菜" value="川菜"></el-option>
            <el-option label="湘菜" value="湘菜"></el-option>
            <el-option label="粤菜" value="粤菜"></el-option>
            <el-option label="鲁菜" value="鲁菜"></el-option>
            <el-option label="外国菜" value="外国菜"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
          <el-button type="primary" @click="searchDishesByCuisine" style="margin-right: 20px">按菜系搜索</el-button>
          <el-input v-model="dish_taste" style="width: 150px"  placeholder="输入菜品口味" clearable  ></el-input>
          <el-button type="primary" @click="searchDishesByTaste" style="margin-right: 20px">按口味搜索</el-button>
          <el-select v-model="dish_category" style="width: 150px"  placeholder="输入菜品类别" clearable  >
            <el-option label="招牌" value="招牌"></el-option>
            <el-option label="热炒" value="热炒"></el-option>
            <el-option label="小吃" value="小吃"></el-option>
            <el-option label="酒水" value="酒水"></el-option>
            <el-option label="炖汤" value="炖汤"></el-option>
            <el-option label="凉拌" value="凉拌"></el-option>
            <el-option label="主食" value="主食"></el-option>
          </el-select>
          <el-button type="primary" @click="searchDishesByCategory" style="margin-right: 20px">按类别搜索</el-button>
        </div>


      </el-main>
    </el-container>
    <div v-if="dishList">
      <h3>菜品名称</h3>
      <el-table :data="dishList">
        <el-table-column type="index" label="序号"></el-table-column> <!-- 新增的索引列 -->
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="dish_name" label="菜品名称"></el-table-column>
        <el-table-column prop="dish_cuisine" label="菜系"></el-table-column>
        <el-table-column prop="dish_price" label="价格"></el-table-column>
        <el-table-column prop="dish_taste" label="口味"></el-table-column>
        <el-table-column prop="dish_category" label="类别"></el-table-column>
        <el-table-column prop="dish_rating" label="推荐指数"></el-table-column>
        <el-table-column label="图片" >
          <template slot-scope="scope">
            <el-popover
                placement="top-start"
                trigger="hover">
              <img :src="scope.row.dish_img" style="width: 150px;height: 150px">
              <img :src="scope.row.dish_img" slot="reference" style="width: 50px;height: 50px">
            </el-popover>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
          <el-button type="warning" @click="update(scope.row.id)">修改</el-button>
            <el-button type="danger" @click="deleteDish(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <el-dialog title="菜品信息" :visible.sync="dialogFormVisible" :before-close="handleClose">
      <el-form :model="form">
        <el-form-item label="菜品名称" :label-width="formLabelWidth">
           <el-input v-model="form.dish_name" autocomplete="off" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="选择菜系" :label-width="formLabelWidth">
          <el-select v-model="form.dish_cuisine" style="width: 240px" placeholder="请选择菜系">
            <el-option label="川菜" value="川菜"></el-option>
            <el-option label="湘菜" value="湘菜"></el-option>
            <el-option label="粤菜" value="粤菜"></el-option>
            <el-option label="鲁菜" value="鲁菜"></el-option>
            <el-option label="家常菜" value="家常菜"></el-option>
            <el-option label="东北菜" value="东北菜"></el-option>
            <el-option label="外国菜" value="外国菜"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品价格" :label-width="formLabelWidth">
          <el-input v-model="form.dish_price" autocomplete="off" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="菜品口味" :label-width="formLabelWidth">
          <el-input v-model="form.dish_taste" autocomplete="off" style="width: 240px"></el-input>
        </el-form-item>
        <el-form-item label="菜品类型" :label-width="formLabelWidth">
          <el-select v-model="form.dish_category" style="width: 240px" placeholder="请选择类型">
            <el-option label="招牌" value="招牌"></el-option>
            <el-option label="热炒" value="热炒"></el-option>
            <el-option label="小吃" value="小吃"></el-option>
            <el-option label="酒水" value="酒水"></el-option>
            <el-option label="炖汤" value="炖汤"></el-option>
            <el-option label="凉拌" value="凉拌"></el-option>
            <el-option label="主食" value="主食"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜品推荐指数" :label-width="formLabelWidth">
          <el-input v-model="form.dish_rating" autocomplete="off" style="width: 240px"></el-input>
        </el-form-item>

        <el-form-item label="图片" :label-width="formLabelWidth" prop="dish_img">
          <el-upload
              class="dish_img-uploader"
              action="http://localhost:10030/common/upload?module=dish_img"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <img v-if="form.dish_img" :src="form.dish_img" class="dish_img">
            <i v-else class="el-icon-plus dish_img-uploader-icon"></i>
          </el-upload>
          <span class="tip">仅支持png/jpg格式的图片</span>
        </el-form-item>



      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateDish">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import axios from "axios";


export default {
  data() {
    return {
      dish_img:'',
      dish_category: '',
      dish_cuisine: '',
      dish_name: '',
      dish_taste: '',
      dishList: [],
      searchTerm: '',
      form:{},
      dialogFormVisible: false,
      formLabelWidth: '120px',
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    handleAvatarSuccess(res, file) {
      this.form.dish_img = `http://localhost:10030/common/download?name=${res.content}`
      //强制刷新一下
      this.$forceUpdate();
    },
    searchDishesByCategory(){
      const params = {
        dish_category: this.dish_category
      };
      // 发送请求并更新菜品列表
      axios.get('http://localhost:10030/dishes/byCategory', {params})
          .then(response => {
            this.dishList = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    searchDishesByCuisine(){
      const params = {
        dish_cuisine: this.dish_cuisine
      };
      axios.get('http://localhost:10030/dishes/byCuisine', {params})
          .then(response => {
            this.dishList = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    searchDishesByName() {
      // 按照菜品名称搜索菜品
      const params = {
        dish_name: this.dish_name
      };
      // 发送请求并更新菜品列表
      axios.get('http://localhost:10030/dishes/byName2', {params})
          .then(response => {
            this.dishList = response.data.data;
          })
          .catch(error => {
            console.error(error);
          });
    },
    searchDishesByTaste() {
      // 按照菜品口味搜索菜品
      const params = {
        dish_taste: this.dish_taste
      };
      // 发送请求并更新菜品列表
      axios.get('http://localhost:10030/dishes/byTaste2',{params} )
          .then(response => {
            this.dishList = response.data.data;
          }) // 将响应数据解析为JSON格式
          .catch(error => {
            console.error(error);
          });
    },


    getDishes() {
      axios.get('http://localhost:10030/dishes/all') // 发送GET请求到后端接口
          .then(response => {
            this.dishList = response.data.data;
          })

            // 将获取到的菜品列表赋值给Vue实例的dishList数据属性
          .catch(error => {
            console.error(error);
          });
    },

    searchDish() {
      axios.get(`http://localhost:10030/dishes/get/${this.searchTerm}`)// 根据搜索框中的内容发送GET请求到后端接口
          .then(response => {
            this.dishList = [response.data.data];// 将获取到的菜品列表赋值给Vue实例的dishList数据属性
            console.log(this.dishList);
          })
          .catch(error => {
            console.error(error);
          });
    },
    //在这个代码中，我添加了一个名为searchTerm的新数据属性，
    // 用来存储搜索框中的内容。我还添加了一个名为searchDish的新方法，
    // 当你在搜索框中输入内容并点击搜索按钮时，这个方法会被调用，
    // 它会根据你输入的内容向服务器发送一个GET请求，并将响应数据赋值给dishList。

    // 修改菜品
    update(id) {
      axios.get(`http://localhost:10030/dishes/get/${id}`).then(response => {
        this.form = response.data.data;
        this.dialogFormVisible = true;
      }).catch(error => {
        console.error(error);
      });
    },

    updateDish() {
      axios.put('http://localhost:10030/dishes/update' , this.form).then(response => {
        // 处理响应，例如刷新表格数据
        this.dialogFormVisible=false;
        alert("修改成功了")
        this.getDishes()
      })
    },

    // 删除菜品
    deleteDish(dish_id) {
      if (confirm("确定要删除该菜品吗？")) {
        // 用户点击“确定”按钮时执行删除操作
        axios.delete(`http://localhost:10030/dishes/delete/${dish_id}`)
            .then(response => {
              // 处理响应数据
              console.log(response.data);
              alert("删除成功了");
              this.getDishes();
            })
            .catch(error => {
              // 处理错误
              console.error(error);
            });
      }
    }


  },
  mounted() {
    // this.getDishes()
  }
}
</script>

<style scoped>

</style>

<style>
.tip {
  display: block;
  margin-top: 10px;
  color: #999;
}
.dish_img-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.dish_img-uploader .el-upload:hover {
  border-color: #409EFF;
}
.dish_img-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.dish_img {
  width: 178px;
  height: 178px;
  display: block;
}
</style>